<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, height=device-height, user-scalable=no, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0">
    <meta name="format-detection" content="telephone=no">
    <title>聊天记录</title>
    <!--<link rel="stylesheet" href="dist/css/layui.mobile.css">-->
    <link id="layuicss-skinlayim-mobilecss" rel="stylesheet" href="src/css/modules/layim/mobile/layim.css?v=2.10" media="all">
    <script src="../js/jquery.js"></script>
    <script src="src/layui.js" type="text/javascript"></script>
    <style>
        *{
            margin: 0;
            padding: 0;
            font: 12px 'Helvetica Neue', 'PingFang SC', STHeitiSC-Light, Helvetica, Arial, sans-serif;
        }

    </style>
</head>
<body style="position: relative;height: 100%;width: 100%;">
<!--<div  style="background-color: #36373C;height: 5%;width:100%;position: fixed;" >-->
<!--<p style="margin: 0 auto;left: 50%;width: 10%;line-height: 50px;color: #fff;font-size: 22px;">历史记录</p>-->
<!--</div>-->
<!--<div  style="position: fixed;top: 5%;height:95%;width: 100%;">-->
    <!--<ul id="msgContainer" style="display: -webkit-box;-webkit-box-pack: center;-webkit-box-orient: vertical;width:100%;-webkit-box-direction: reverse;height: 100%;position:absolute;overflow-y: scroll">-->
    <!--</ul>-->
<!--</div>-->


                         <div class="layui-m-layer layui-m-layer1">
                             <div class="layui-m-layermain">
                                 <div class="layui-m-layersection">
                                     <div class="layui-m-layerchild  layui-m-anim--1">
                                         <div class="layui-m-layercont">
                                             <div class="layim-panel">
                                                 <div class="layim-title">
                                                     历史消息
                                                 </div>
                                                 <div class="layui-unselect layim-content">
                                                     <div class="layim-chat layim-chat-friend">
                                                         <div class="layim-chat-main" style="bottom: 0;">
                                                             <ul id="msgContainer"></ul>
                                                         </div>
                                                     </div>
                                                 </div>
                                             </div>
                                         </div>
                                     </div>
                                 </div>
                             </div>
                         </div>

<script>
    layui.use('laytpl', function() {
        window.laytpl = layui.laytpl;
    })

    var myId = location.search.split("&")[0].split("?")[1];
    var otherId = location.search.split("&")[1];
    var type = location.search.split("&")[2];
    $.ajax({
        url:'/qj/kf/historyMsg',
        type:'get',
        data:{myId:myId,
            otherId:otherId,
            type:type
        },success:function(res){
            window.result = res;
            if(type=="consultant") {//顾问
                for (i = 0; i < res.message.length; i++) {

                    res.message[i].flag = res.message[i].flag - 1;

                    if (i == res.message.length - 1) {
                        var getTpl = document.getElementById('container').innerHTML
                            , view = document.getElementById('msgContainer');
                        laytpl(getTpl).render(res, function (html) {
                            view.innerHTML = html;
                            document.getElementsByClassName("layim-chat-main")[0].scrollTop = 10000000;
                        });
                    }
                }
            }else{//不是顾问
                var getTpl = document.getElementById('container').innerHTML
                    , view = document.getElementById('msgContainer');
                laytpl(getTpl).render(res, function (html) {
                    view.innerHTML = html;
                    document.getElementsByClassName("layim-chat-main")[0].scrollTop = 10000000;
                });
            }
        },error:function(res){
            console.log(res);
        }
    })

</script>


<!--0代表自己，1表示other-->
<script type="text/html" id="container">
        {{#layui.each(d.message,function(index,item){}}
        {{#if(item.flag==0){}}
        <!--自己-->
        <li class="layim-chat-li layim-chat-mine">
            <div class="layim-chat-user">
                <img src={{=result.mine.avatar}}>
                <cite>{{result.mine.username}}</cite>
            </div>
            <div class="layim-chat-text">
                {{item.content}}
            </div>
        </li>
        {{#}else{}}
<!--other-->
        <li class="layim-chat-li">
            <div class="layim-chat-user">
                <img src={{=result.other.avatar}}>
                <cite>{{result.other.username}}</cite>
            </div>
            <div class="layim-chat-text">
                {{item.content}}
            </div>
        </li>
        {{#}}}
        {{#})}}
</script>
</body>
</html>